<template>
  <div class="monitor-list flex flex-column">
    <antd-form
      :options="options"
      :label-col="8"
      :wrapper-col="16"
      class="flex-fixed"
      style="margin: 10px 20px"
      @submit="formChange"
    />
    <common-table
      ref="Table"
      :fetch="getDataAsync"
      :pagination="{ pageSize: 15 }"
      :fetch-params="paramsData"
      :columns="columns"
      :show-toolbar="false"
      @vue:mounted="() => $refs.Table.load()"
      class="flex-auto-height"
    >
      <template #index="{ index }">{{ index + 1 }}</template>
      <template #is_online="{ text, scope }">
        <span v-if="scope.is_online" style="color: #1e9fff">在线</span>
        <span v-else style="color: #ff5722">离线</span>
      </template>
      <template #action="{ text, scope }">
        <a-button type="link" @click="details(scope)">详情</a-button>
      </template>
    </common-table>
  </div>
</template>

<script>
import { smokeDetectionList, getYardSelectList } from '@gis/lib/api';
import { openGoodsDeviceDialog } from './opt.js';
import { useDicDataStore } from '@gis/lib/pinia/dicData.js';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';

export default {
  name: 'iot-list',
  props: { type: { type: String }, area_code: { type: String } }, //物联设备类型-D0114
  data() {
    return {
      yardList: [],
      formData: {},
      columns: [
        { title: '所属区域', dataIndex: 'area_name' },
        { title: '设备名称', dataIndex: 'name' },
        // { title: '设备类型', dataIndex: 'type', customRender: (val) => this.iotType[val.type] || '' },
        { title: '设备序列号', dataIndex: 'identification' },
        { title: '设备安装地址', dataIndex: 'install_address' },
        { title: '设备状态', dataIndex: 'is_online', scopedSlots: { customRender: 'is_online' } },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: 100 },
      ],
    };
  },
  computed: {
    paramsData() {
      return Object.assign({}, this.formData, {
        type: this.type,
        area_code: this.area_code ? this.area_code : this.userInfo.area_code,
      });
    },
    iotType() {
      const dicDataStore = useDicDataStore();
      return dicDataStore.getDicData(this.type);
    },
    options() {
      return [
        {
          component: 'a-select',
          label: '小区',
          field: 'yard_id',
          props: {
            showSearch: true,
            options: this.yardList,
            optionFilterProp: 'label',
          },
        },
        {
          component: 'a-input',
          label: '设备名称',
          field: 'name',
        },
        {
          component: 'a-input',
          label: '设备序列号',
          field: 'identification',
        },
      ];
    },
  },
  created() {
    this.getYardSelectList();
  },
  methods: {
    async getYardSelectList() {
      const data = await handleCommonRes(getYardSelectList, {
        area_code: this.area_code ? this.area_code : this.userInfo.area_code,
      });
      this.yardList = data.map((item) => {
        return {
          label: item.yard_name,
          value: item.yard_id,
        };
      });
    },
    formChange(val) {
      this.formData = val;
      this.$nextTick(() => {
        this.$refs.Table.load();
      });
    },
    details(data) {
      openGoodsDeviceDialog(data);
    },
    async getDataAsync(params) {
      return this.handleTableResult(await smokeDetectionList(params));
    },
  },
  setup() {
    const userInfo = useUserInfoStore();
    return { userInfo };
  },
};
</script>

<style scoped lang="less">
.monitor-list {
  width: 100%;
  height: 100%;
}
</style>
